<template>
	<button @click="btn('')">监视</button>
	<button @click="btn('ref')">监视ref</button>
	<button @click="btn('reactive')">监视reactive</button>
	<button @click="btn('add')">add</button>
	<button @click="add">求和</button>
	<div>{{ reactiveObj }}</div>
	<div>computed修改后: {{ computedVal }}</div>
	<div>ref: {{ refObj }}</div>
	<div>reactive: {{ reactiveObj }}</div>
	<div>求和结果: {{ sum }}, computed: {{ computedAdd }}</div>
	<div>text: {{ text }}</div>
	<h1>==========Test1============</h1>
	<Test1 :personList="personList" :count="count" v-model:inputVal="text"/>
	<h1>==========组件传值============</h1>
	<Grandpa />
	<h1>==========其他API============</h1>
	<Api />
</template>

<script lang="ts" setup>
import Test1 from './MyTest1.vue'
import Grandpa from './Grandpa.vue'
import Api from './Api.vue'
import type { PersonInterface, Persons } from '@/interface'
import useSum from '@/hooks/useSum'
const { sum, add, computedAdd } = useSum()
const reactiveObj = reactive<PersonInterface>({
	name: '张三',
	age: 100,
	gender: '男',
})
const refObj = ref({
	name: '张三',
	age: 100,
	obj: {
		a: 1000,
	},
})
const count = ref(10000)
const text = ref('hello')

const personList = reactive<Persons>([
	{ name: '张三', age: 100, gender: '男' },
	{ name: '李四', age: 200, gender: '男' },
	{ name: '王五', age: 300, gender: '男' },
])

onMounted(() => {
	// f1()
})

const computedVal = computed({
	get() {
		return `名字: ${reactiveObj.name}` + `---` + `年龄: ${reactiveObj.age}`
	},
	set(val) {
		reactiveObj.name = val
	},
})

watch(refObj.value, (e) => {
	console.log('watch===ref', e)
})
watch(reactiveObj, (e) => {
	console.log('watch===reactive', e)
})

watchEffect(() => {
	console.log('watchEffect自动触发一次');
	if (reactiveObj.age >= 500) {
		console.log('大于300')
		return
	}
})

const btn = (type: string) => {
	// obj1.name = '王麻子'
	if (type === 'ref') {
		refObj.value.obj.a = 2000
	} else if (type === 'reactive') {
		reactiveObj.name = 'reactive'
	} else if (type === 'add') {
		reactiveObj.age += 100
	} else {
		computedVal.value = '王麻子'
	}
}

const f1 = () => {
	Object.assign(reactiveObj, { name: '李四', age: 200 })
	console.log('obj1===', reactiveObj)
	const { name, age } = toRefs(reactiveObj)
	name.value = '王五'
	age.value = 300
}
</script>
